<template>
  <el-dialog
    :title="`上传简历（${item}）`"
    :visible.sync="currentValue"
    :before-close="handleClose"
    width="980px"
  >
    <div class="dialog-wrapper" v-if="currentValue">
      <div>
        51job上仅支持pdf、excel两种格式的简历文件上传
        <br /><br />
        智联招聘上支持所有格式
        <br /><br />
      </div>
      <el-upload
        class="upload-demo"
        drag
        :action="url"
        multiple
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :before-upload="beforeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

      <div class="table-wrapper">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" width="140">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.name1"
                filterable
                allow-create
                placeholder="请输入关键词"
              >
                <el-option
                  v-for="item in scope.row.name"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="job" label="岗位" width="180">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.job1"
                filterable
                allow-create
                placeholder="请输入关键词"
              >
                <el-option
                  v-for="item in scope.row.job"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="phone" label="电话" width="180">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.phone1"
                filterable
                allow-create
                placeholder="请输入关键词"
              >
                <el-option
                  v-for="item in scope.row.phone"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="email" label="邮箱" width="220">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.email1"
                filterable
                allow-create
                placeholder="请输入关键词"
              >
                <el-option
                  v-for="item in scope.row.email"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="school" label="学校" width="220">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.school1"
                filterable
                allow-create
                placeholder="请输入关键词"
              >
                <el-option
                  v-for="item in scope.row.school"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="makeSure">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import ZvModel from '@/mixins/zv-model'
import { saveInfo } from '@/api/home'
export default {
  name: 'UpLoadFile',
  mixins: [ZvModel],
  props: {
    item: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      url: `${process.env.VUE_APP_BASE_URL}/fetchInfo`
    }
  },
  methods: {
    beforeUpload(file) {
      if (
        file.name.indexOf('51job') > -1 &&
        (file.name.lastIndexOf('.doc') > -1 ||
          file.name.lastIndexOf('.mht') > -1)
      ) {
        this.$message({
          message: '51job上仅支持pdf、excel两种格式的简历文件上传',
          type: 'warning'
        })
        return false
      }
    },
    handleRemove(file, fileList) {
      const index = fileList.indexOf(file)
      this.tableData.splice(index, 1)
    },
    handleSuccess(response) {
      if (response.success) {
        this.tableData.push({
          name1: response.data.name[0] || '',
          name: response.data.name || [],
          job1: response.data.job[0] || '',
          job: response.data.job || [],
          phone1: response.data.phone[0] || '',
          phone: response.data.phone || [],
          email1: response.data.email[0] || '',
          email: response.data.email || [],
          school1: response.data.school[0] || '',
          school: response.data.school || [],
          url: response.data.url || '',
          originalUrl: response.data.originalUrl || ''
        })
      } else {
        this.$message.error(response.error)
      }
    },
    handleClose(done) {
      this.tableData = []
      this.currentValue = false
      done()
    },
    handleCancel() {
      this.tableData = []
      this.currentValue = false
    },
    makeSure() {
      if (this.tableData.length === 0) {
        this.currentValue = false
        return
      }
      const data = []
      this.tableData.forEach(item => {
        const dic = {
          name: item.name1,
          job: item.job1,
          phone: item.phone1,
          email: item.email1,
          school: item.school1,
          url: item.url,
          originalUrl: item.originalUrl,
          time: '',
          status: '未处理',
          section: this.item
        }
        data.push(dic)
      })
      saveInfo(data)
        .then(resule => {
          if (resule.success) {
            this.currentValue = false
            this.$emit('saveSuccess')
            this.tableData = []
          }
        })
        .catch(() => {
          this.currentValue = false
          this.tableData = []
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  .table-wrapper {
    margin-top: 20px;
  }
  .upload-demo {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
</style>
